<template>
  <div class="container-fluid" id="vueapp">
    <transition name="el-zoom-in-bottom">
      <moves
        v-if="show"
        v-bind="{
          scratchheightset,
          scratchwidthset,
          ifloddingset,
          isShow,
          dragMinHeight: scratchheight,
          dragMinWidth: scratchwidth,
          border: value2,
          tiaoguo: $refs
        }"
      >
        <aliplayer
          v-show="show2"
          ref="sections"
          v-bind="{ scratchheight, scratchwidth }"
        ></aliplayer>
      </moves>
    </transition>
    <div
      id="top"
      style="position: absolute;top: 12px;right: 14px;z-index: 1000;"
    >
      <el-switch
        v-model="value"
        active-color="#13ce66"
        :active-text="$t('Code')"
        inactive-color="#13ce66"
      ></el-switch>
      <setting></setting>
    </div>
  </div>
</template>

<script>
import { version } from "../../package.json";
import moves from "./moves.vue";
import aliplayer from "./aliplayer/index.vue";
import setting from "@/components/setting.vue";
export default {
  name: "scratch",
  data() {
    return {
      value: false,
      value2: true,
      loading: false,
      sections: false,
      scratchheight: 313,
      scratchwidth: 275,
      iflodding: false,
      show: true,
      show2: true
    };
  },
  watch: {
    value() {
      const lang = this.$i18n.locale
      if(lang === 'en') {
        window.location.href = "/en.html";
      } else {
        window.location.href = "/zh-cn.html";
      }
    }
  },
  created() {
    console.log(this)
  },
  mounted() {
    document.title = `北京哈工科教DouBao编程软件_V${version}`;
  },
  methods: {
    isShow(i) {
      if (i) {
        this.scratchwidth = document.getElementById("body").offsetWidth;
        this.scratchheight = document.getElementById("body").offsetHeight;
      } else {
        this.scratchwidth = 275;
        if (
          this.scratchheight == 30 ||
          this.scratchheight == document.getElementById("body").offsetHeight
        ) {
          this.scratchheight = 313;
        } else {
          this.scratchheight = 30;
        }
      }
    },
    scratchheightset(v) {
      this.scratchheight = v;
    },
    scratchwidthset(v) {
      this.scratchwidth = v;
    },
    ifloddingset(v) {
      this.iflodding = v;
    },
    comeshow() {
      this.value2 = true;
      this.show = true;
    }
  },
  components: {
    moves,
    aliplayer,
    setting
  }
};
</script>
